<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
        <choice-card-table
        :tableData='tableData'
        @openDialog='openDialog'
        @removeTitle='removeTitle'
        @RefreshThePage='RefreshThePage'/>
    </el-tab-pane>
    <el-tab-pane label="待审核" name="second" >
      <choice-card-table :tableData='tableData'/>
    </el-tab-pane>
    <el-tab-pane label="已审核" name="third">
      <choice-card-table :tableData='tableData'/>
    </el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth">
      <choice-card-table :tableData='tableData'/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import choiceCardTable from './choiceCardTable.vue' // 第二部分引入的表格组件
export default {
  components: { choiceCardTable }, // 第二部分引入的表格组件
  name: 'choiceCard', // 精选题库第二部分表格组件
  props: { // table表格全部数据
    tableData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      if (tab._props.name === 'first') {
        this.$emit('firstChkType')
      } else if (tab._props.name === 'second') {
        this.$emit('secondChkType')
      } else if (tab._props.name === 'third') {
        this.$emit('thirdChkType')
      } else if (tab._props.name === 'fourth') {
        this.$emit('fourthChkType')
      }
    },
    removeTitle (id) { // 删除表格对应数据的事件
      this.$emit('removeTitle', id) // 通知父组件删除对应的表格数据
    },
    openDialog (id) { // 子组件的打开审核弹框事件
      this.$emit('openDialog', id)
    },
    RefreshThePage () { // 子组件的刷新表格事件
      this.$emit('RefreshThePage')
    }
    // oneChkType () { // 点击待审核页面
    //   this.$emit('oneChkType')
    // }
  }
}
</script>

<style>
</style>
